<template>
	<view style="position: relative;">
		<u--image src="https://picsum.photos/750/1336?blur=7" width="100%" height="calc(100vh - 88rpx)"></u--image>
		<view class="cbg-fff"
			style="position: fixed;bottom: 140rpx;left: 30rpx; right: 30rpx;height: 554rpx;border-radius: 24rpx;">
			<view class="pl-30 pr-30">
				<view class="pt-50 pb-74 cfs-333 fs-36">您好,请选择就餐人数</view>
				<view class="flex f-row-nowrap f-ai-start h-90 ">
					<view class="flex-1 fs-30 cfs-333">就餐时间</view>
					<view class="fs-30 cfs-333 mr-4" @click="time.show = true">{{ formatDate(time.value) }}
					</view>
					<text class="iconfont icon-arrow cfs-666 fs-24 mt-2"></text>
				</view>
				<view class="flex f-row-nowrap f-ai-start h-90 ">
					<view class="flex-1 fs-30 cfs-333">就餐方式</view>
					<view class="fs-30 cfs-333">外带</view>
				</view>
				<view class="flex f-row-nowrap f-ai-start h-90 ">
					<view class="flex-1 fs-30 cfs-333">就餐人数</view>
					<view class="fs-30 mr-4" :class="person.value ? 'cfs-333' : 'cfs-fd6801'" @click="person.show = true">
						{{ person.value || '请选择' }}</view>
					<text class="iconfont icon-arrow cfs-666 fs-24 mt-2"></text>
				</view>
				<u-button type="primary" shape="circle" color="#fd6801" text="确 认" :disabled="isDisabled" :loading="loading"
					@click="btnConfirm"></u-button>
			</view>
		</view>
		<u-picker :show="person.show" :columns="person.columns" @confirm="personConfirm" @cancel="personCancel"></u-picker>
		<u-datetime-picker :show="time.show" v-model="time.value" mode="datetime" :minDate="time.minDate" :filter="filter"
			@confirm="timeConfirm" @cancel="timeCancel"></u-datetime-picker>
	</view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState: FoodMapState } = createNamespacedHelpers('Food')
import { formatDate } from '@/utils/share'
export default {
	data() {
		return {
			//就餐人数
			person: {
				show: false,
				value: 0,
				columns: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]]
			},
			time: {
				show: false,
				value: Number(new Date()),
				minDate: Number(new Date()),

			},
			loading: false, //确认按钮

		}
	},
	computed: {
		...FoodMapState({
			shopName: 'shopName'
		}),
		isDisabled() {
			if (this.person.value) return false;
			return true;
		}

	},
	created() {
	},
	methods: {
		personConfirm(e) {
			this.person.value = e.value[0]
			this.person.show = false
		},
		personCancel() {
			this.person.show = false
		},

		timeConfirm(e) {
			this.time.value = e.value
			this.time.show = false
		},
		timeCancel() {
			this.time.show = false
		},
		formatDate(date) {
			return formatDate(date, dateInfo => {
				const { month, day, hour, minute, week, isToday, isTomorrow } = dateInfo
				if (isToday) return `今天 (${week}) ${hour}:${minute}`
				if (isTomorrow) return `明天 (${week}) ${hour}:${minute}`
				return `${month}月${day}日 ${hour}:${minute}`
			})
		},
		filter(mode, options) {
			if (mode === 'minute') {
				return options.filter((option) => option % 5 === 0);
			}

			return options;
		},

		btnConfirm() {
			this.loading = true
			setTimeout(() => {
				this.loading = false
			}, 3000)
		}

	}
}
</script>
